<template>
    <div>
        <Header></Header>
        <div class="contain">
            <div class="left">

                <el-row>
                    <el-col>
                        <h5 style="text-align: center">导航栏</h5>
                        <el-menu
                                default-active="5"
                                class="el-menu-vertical-demo"
                                >
                            <el-menu-item index="1">
                                <i class="el-icon-location"></i>
                                <span slot="title">关于我们</span>
                            </el-menu-item>
                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">意见反馈</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <i class="el-icon-document"></i>
                                <span slot="title">版权声明</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-setting"></i>
                                <span slot="title">投诉举报</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>

                </el-row>
            </div>
            <div class="right">
                <card
                        title="联系我们"
                        width="1000px"
                        height="600px"

                >
                    <div class="contact-main">
                        <p>Email：1032945421@qq.com</p>
                        <p>QQ：1032945421</p>
                        <p>微信：18635378064</p>
                        <p>电话：0123-888888</p>
                        <p>工作时间：周一至周五 9:30-12:00 14:00-18:30</p>
                        <p>地址：山西省太原理工大学明向校区</p>
                    </div>
                </card>
            </div>
        </div>

        <Footer></Footer>
    </div>

</template>
<script>
    import Header from './components/Header'
    import Footer from './components/Footer'
    import card from './components/card'
    export default {
        components:{
            Header,Footer,card
        },
        data() {
            return {
                tabPosition: 'left'
            };
        }
    }

</script>
<style lang="scss" scoped>
    @import '../assets/scss/variable';
    .contain {
        width: $pageWidth;
        margin: 16*$length auto 0;
        @extend %flex-row-spb;
        align-items: start;
    }
    .contact-main{
        padding: 10*$length 24*$length;
        > p{
            @include fontStyle(16,45,500,#666,left);
            @extend %cursorPointer;
        }
    }
</style>